<template>
  <div style="position: relative;">
    <div style="position: absolute; right: 0px; top: -30px; z-index: 999;">
      <span class="bh-switch-item bh-switch-setting bh-pull-right" data-action="自定义列" data-x-type="setting" @click="customClick" style="padding-top: 5px;cursor: pointer;margin-right: 8px;">
        <i class="iconfont" style="font-size:14px">&#xe667;</i>
        <span>自定义列</span>
      </span>
    </div>
    <div class="jqxDatableClass"></div>
  </div>
</template>

<script>
import pageUtil from '../../lib/bh-vue/utils/pageUtil'

export default {
  data () {
    return {
      params: null,
      datatable: null
    }
  },
  props: {
    datamodel: Array,
    queryPath: Object,
    customColumns: Array
  },
  computed: {
    el () {
      return $(this.$el).children(0)
    }
  },
  mounted() {
    this.init()

    $(this.$el).on('editabletatable.cell.change', (e) => {
      console.log(e, 'change')
    })

    $(this.$el).on('checkone', () => {
      this.$emit('check-change', this.checkedRecords())
    })

    $(this.$el).on('checkall', () => {
      this.$emit('check-change', this.checkedRecords())
    })

    $(this.$el).on('custom.grid', (...custom) => {
      //保存自定义显示列
      console.log(custom,"custom")
    })

    this.addEvtToIe()
  },
  destroyed() {
    this.destroyEvt()
  },
  methods: {
    addEvtToIe() {
      let f = this.refresh
      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
          window.addEventListener('hashchange', f, false)
      }
    },
    destroyEvt() {
        let f = this.refresh
        if (!!window.ActiveXObject || 'ActiveXObject' in window) {
            window.removeEventListener('hashchange', f, false)
        }
    },
    init() {
      const { datamodel, queryPath, customColumns } = this

      if (!datamodel) {
        return
      }
      let root = $(this.$el)
      root = root.find(".jqxDatableClass")
      let contentDiv = root.children() //$("<div></div>")
      if (contentDiv.length > 0) {
        root.empty()
      }

      contentDiv = $('<div />')
      root.append(contentDiv)

      this.datatable = contentDiv.bpmdatatable({
        datamodel: datamodel,
        root: 'datas>result>rows',
        url: queryPath.url,
        params: queryPath.params,
        customColumns: customColumns,
        columnsReorder: true,
        selectionMode: "custom",
        enableBrowserSelection: true,
        sortable: true,
        schema: true,
        contextPath: window.contextPath,
        downloadComplete: (e) => {
          if(e.code === "0"){
            //附件类型数据处理
            this.datamodel.forEach(element => {
              if(element.dataType === "Clob"){
                (e.datas.result.rows.length > 0) && e.datas.result.rows.forEach(item => {
                  for(let key in item){
                    if(element.name === key){
                      let fileDatas = item[key]
                      let fileArr = []
                      for(let key in fileDatas){
                        fileArr.push(key)
                      }
                      item[key] = fileArr.join("，")
                    }
                  }
                });
              }
            });
            e.datas.totalSize  = e.datas.result.totalCount
            this.$emit('downloadComplete', e)
          }else{
            pageUtil.tip("数据请求失败！","error")
          }
        }
      })
    },
    reload(params, overrideParams) {
      if (overrideParams || params) {
        this.params = params || null
      }
      this.datatable.bpmdatatable('reload', params || this.params)
    },
    refresh(){
      this.destroy()
      this.init()
    },
    destroy() {
      const table = this.datatable.data('jqxDataTable').instance
      table.pagerbuttonsbottom = $(this.$el).find(".bh-pager")
      table.pagerbuttonstop = $(this.$el).find(".bh-pager")
      $(this.$el).off('custom.grid')
      table.destroy()
      // $(this.$el).empty()
    },
    checkedRecords() {
      const checkedIndexes =  this.datatable.bpmdatatable('checkedRowsIndex')
      const result = this.datatable.bpmdatatable('getResult')
      const rows = result.datas.result.rows
      return checkedIndexes.map(item => rows[item])
    },
    beforeDestroy() {
      $(this.$el).off('checkone')
      $(this.$el).off('checkall')
      this.destroy()
    },
    getTableEl(){
      return this.datatable
    },
    customClick(){
      $(this.datatable).emapdatatable('selectToShowColumns', {});
    }
  },
  watch: {
    queryPath: {
      handler: function(newVal) {
        console.log(newVal, "newVal")
        this.refresh()
        // this.reload(null, true);
      },
      deep: true
    },
  },
}
</script>
